import {
  defaultCommonModalRefObject,
  ICommonModalRefObject,
} from '@/hooks/useModalRef';
import React, { useMemo, useReducer, useRef } from 'react';
import OperateModal from './components/OperateModal';
import TreeNode from './components/TreeNode';
import { getDefaultState, GlobalContext } from './config';
import reducer from './store';
import { State } from './type';

export default function App() {
  const [state, dispatch] = useReducer(reducer, null, getDefaultState);
  const { nodeList } = state as State;

  const modalRef = useRef<ICommonModalRefObject>({
    ...defaultCommonModalRefObject,
  });

  console.log(nodeList);

  const value = useMemo(() => ({ modalRef, dispatch }), []);

  return (
    <GlobalContext.Provider value={value}>
      <div style={{ padding: 10 }}>
        {nodeList.map((node) => (
          <TreeNode key={node.id} data={node} />
        ))}
      </div>
      <OperateModal modalRef={modalRef} />
    </GlobalContext.Provider>
  );
}
